import React, { Fragment, useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card,Table,Form, Input, Modal, message,Button,Popconfirm,} from 'antd';
import {queryRequest,editRequest,deleteRequest,addRequest} from './services';


const Index = () => {
  const [currentInfo,setCurrentInfo] = useState<{show:boolean,info:any}>({show:false,info:{}});
  const [dataSource,setDataSource] = useState<any[]>([]);
  const [form] = Form.useForm();
  const columns = [
    {
      title: '发货人',
      dataIndex: 'user',
    },
    {
      title: '联系电话',
      dataIndex: 'phone',
    },
    {
      title: '发货地址',
      dataIndex: 'address',
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (id:number,record:any) => <Fragment>
        <Button type='link' onClick={() => { handleEdit(record)}}> 编辑 </Button>
        <Popconfirm
          title="确定删除吗？"
          onConfirm={()=>{ handleDelete(id)}}
        >
          <Button danger  type='link'>删除</Button>
        </Popconfirm>
      </Fragment> 
    },
  ];
  //初始化
  useEffect(() => {
    getList();
  },[]);
  //请求列表接口---请求
  const getList = () => { 
    queryRequest().then((res:any) => {
      setDataSource(res)
      console.log(res)
    });
  }
  //提交编辑/新增---请求
  const handleOK = () => {
    form.validateFields().then(values => {
      let params = {...values};
      let request = addRequest;
      if(currentInfo.info.id){
        params['id'] = currentInfo.info.id;
        request = editRequest;
      }
      request(params).then((res) => {
        if(res.success){
          message.success('修改成功');
          setCurrentInfo({show:false,info:{},});
          getList();
        }
      })
    }).catch(info => {
      console.log(info)
    })
  }
  //删除---请求
  const handleDelete = (id:any) => {
    deleteRequest({id:id}).then(res => {
      if(res.success){
        message.success('删除成功');
        getList();
      }
    })
  }
  //编辑按钮
  const handleEdit = (record:any) => {
    setCurrentInfo({show:true,info:record});
    form.setFieldsValue({
      phone: record.phone,
      user: record.user,
      address: record.address
    })
  }
  //添加按钮
  const handleAdd = () => {
    setCurrentInfo({show:true,info:{}});
    form.resetFields();
  }

  return <PageHeaderWrapper title={false}>
    <Card>
      <div style={{textAlign:'right'}}>
        <Button type='primary' onClick={handleAdd}>添加发货地址</Button>
      </div>
      <Table
        rowKey='id'
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        style={{marginBottom:10}}
      />
      
    </Card>
    <Modal
      title={currentInfo.info.id?'编辑':'新增'}
      visible={currentInfo.show}
      onCancel={()=>{
        form.resetFields();
        setCurrentInfo({show:false,info:{}});
        
        ;
      }}
      destroyOnClose={true}
      onOk={handleOK}
    >
      <Form
        labelCol={{span:6}}
        wrapperCol={{span:18}}
        form={form}
      >
        <Form.Item label='发货人' name="user" rules={[{required: true, message: '请输入发货人'}]}>
          <Input/>
        </Form.Item>
        <Form.Item label='联系电话' name="phone" rules={[{required: true, message: '请输入联系电话'}]}>
          <Input/>
        </Form.Item>
        <Form.Item label='发货地址' name="address" rules={[{required: true, message: '请输入发货地址'}]}>
          <Input/>
        </Form.Item>
      </Form>
    </Modal>
  </PageHeaderWrapper>
}

export default Index;